<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// 开始绘制矩形。
context.fillStyle="#ff00ff";
context.strokeStyle="blue";
context.fillRect(20,20,100,100);
context.strokeRect(20,20,100,100);
context.fill();
context.stroke();
// 保存当前canvas状态。
context.save();
//绘制另外一个矩形。    
context.fillStyle="#ff0000";
context.strokeStyle="green";
context.fillRect(140,20,100,100);
context.strokeRect(140,20,100,100);
context.fill();
context.stroke();
// 恢复第一个矩形的状态。
context.restore();
// 绘制两个矩形。
context.fillRect(20,140,50,50);
context.strokeRect(80,140,50,50);
</script>
</body>
</html>  
